<template>
    <div class="property">
        <van-nav-bar title="认证缴费" left-arrow @click-left="goBack" />
        <h2>
            <van-icon name="wap-home-o" />认证费</h2>
        <van-cell-group>
            <van-field v-model="amount" clearable label="金额" type="number" placeholder="请输入金额" />
        </van-cell-group>
        <div class="btn">
            <van-button block type="primary" @click="payment()">缴费</van-button>
        </div>
        <div class="none">
            <!-- <van-button size="small" type="default">无云闪付</van-button> -->
        </div>
        <div v-html="html"></div>
        <div class="list">
            <h3>缴费记录</h3>
            <ul>
                <li v-for="record in records" class="recordList" :key="record.time">
                    <div>{{record.time}}</div>
                    <div>{{record.amount}}</div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import { mapMutations, mapState } from 'vuex'
    import { Toast } from "vant"
    export default {
        name: 'PropertyPayment',
        data() {
            return {
                amount: '',
                isBlock: 'true',
                html: "",
                records: [
                    {
                        time: '2019年8月1日',
                        amount: '100元'
                    },
                    {
                        time: '2019年4月1日',
                        amount: '100元'
                    },
                    {
                        time: '2019年1月1日',
                        amount: '100元'
                    },
                    {
                        time: '2018年7月1日',
                        amount: '100元'
                    },
                    {
                        time: '2018年4月1日',
                        amount: '100元'
                    },
                    {
                        time: '2018年1月1日',
                        amount: '100元'
                    }
                ]
            }
        },
        computed: {
            ...mapState(['token', 'userInfo', 'userid', "homeId"]), // this.token相当于this.$store.state.token
        },
        mounted() {
            this.getCommunityList1()
        },
        methods: {
            goBack() {
                window.history.length > 1 ? this.$router.go(-1) : this.$router.push('./')
            },
            // StandardPost(html) {
            //     localStorage.removeItem('callbackHTML');
            //     localStorage.setItem('callbackHTML', html);
            //     window.location.href = window.location.href.split('/pages/')[0] + 'call_back.html';
            // },
            getTime() {     	//获取时间
                var date = new Date();

                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();

                var hour = date.getHours();
                var minute = date.getMinutes();
                var second = date.getSeconds();

                //这样写显示时间在1~9会挤占空间；所以要在1~9的数字前补零;
                if (hour < 10) {
                    hour = '0' + hour;
                }
                if (minute < 10) {
                    minute = '0' + minute;
                }
                if (second < 10) {
                    second = '0' + second;
                }


                var x = date.getDay();//获取星期


                var time = year.toString() + month.toString() + day.toString() + hour.toString() + minute.toString() + second.toString()
                return time
            },
            getCommunityList1() {
                let that = this
                this.$axios.get('/comm/getuserReviewStatus', {
                    params: {
                        user_id: this.userid
                    }
                }).then((res) => {
                    //console.log(res);
                    let { message, data, status } = res;
                    console.log('res', res)
                    if (status == 200) {
                        this.idcard_state == data.idcard_state
                        this.comm_state = data.comm_state
                    }
                })
            },
            payment() {
                if (this.amount) {
                    // this.getCommunityList1()
                    // this.$router.push("enter1")
                    if(this.idcard_state==1){
                        Toast('请先绑定身份')
                        this.$router.push('IDcard')
                    }

                    let timestamp = this.getTime()
                    console.log(timestamp)
                    let formdata = new FormData()
                    let merId = "777290058110048";
                    let txnAmt = this.amount;
                    let txnTime = timestamp;
                    let orderId = timestamp;
                    formdata.append('merId', merId);
                    formdata.append('txnAmt', txnAmt);
                    formdata.append('txnTime', txnTime);
                    formdata.append('orderId', orderId);

                    // this.$axios.post("http://192.168.89.108:8080/ACPSample_B2C/form_6_2_FrontConsume",formdata,{
                    //     headers: {
                    //                 'Content-Type': 'multipart/form-data',
                    //             }
                    // }).then((res)=>{
                    //     console.log(res)
                    // })
                    // this.$axios.get("http://192.168.89.108:8080/ACPSample_B2C/form_6_2_FrontConsume", {
                    this.$axios.get("http://58.51.141.218:9091/ACPSample_B2C/form_6_2_FrontConsume", {
                        params: {
                            merId: "777290058110048",
                            txnAmt: this.amount,
                            txnTime: txnTime,
                            orderId: txnTime
                        }

                    }).then((res) => {
                        console.log(res)
                        // const iframe = document.createElement('iframe');
                        // const div =document.createElement("div")
                        // div.
                        // iframe.write=res
                        // iframe.document.write(res)
                        // div.innerHTML = this.$route.query.htmls;
                        // iframe.appendChild(div);
                        document.write(res)
                        // let href=window.location.href
                        // console.log(href);

                        // let routeData = this.$router.resolve({ path: 'a', query: { htmls: res } });
                        // // console.log(222,routeData.href)
                        // window.open(routeData.href, '_blank');
                        // plus.runtime.openURL(routeData.href, function (res) {
                        //                 })
                        // this.$router.push({ path: 'a', query: { htmls: res } })
                        // window.open("https://cashier.test.95516.com/b2c/index.action?transNumber=607641499509525222301")
                    })
                } else {
                    Toast('请输入金额')
                }
                //  this.$axios.get("http://192.168.89.108:8080/ACPSample_AppServer/form05_6_2_AppConsume", {
                //     params: {
                //         merId: "777290058110048",
                //         txnAmt: this.amount,
                //         txnTime: "20191029102243",
                //         orderId: "20191029102243"
                //     }

                // }).then((res) => {
                //     console.log(res)
                //     this.html=res
                // })
            }
        }
    }
</script>
<style lang="scss" scope>
    .property {
        h2 {
            line-height: 0.8rem;
            padding: 0 0.3rem;
            font-size: 0.32rem;
            font-weight: normal;

            &>.van-icon {
                font-size: 0.4rem;
                position: relative;
                top: 0.08rem;
                margin-right: 0.1rem;
            }
        }

        .van-nav-bar {
            background-color: #4b77e4;
            color: white;
        }

        .van-nav-bar__title {
            color: white;
        }

        .van-icon {
            color: white !important;
        }

        .van-cell-group {
            .van-field {
                .van-field__label {
                    width: 1rem;
                }
            }
        }

        .btn {
            margin-top: 0.4rem;
            padding: 0 0.2rem;

            .van-button {
                font-size: 0.36rem;
            }
        }

        .van-button--primary {
            background-color: #4b77e4;
        }

        .van-button--block {
            width: 40%;
            margin: 0 auto;
        }

        .none {
            padding: 0 0.2rem;
            text-align: right;

            .van-button {
                border: 0 none;
            }
        }

        .list {
            padding: 0 0.2rem;

            h3 {
                font-size: 0.28rem;
                line-height: 0.8rem;
            }

            ul>li {
                line-height: 0.6rem;
                display: flex;
                justify-content: space-between;
            }
        }
    }
</style>